<script setup>
// import { h } from 'snabbdom'
import { onBeforeUnmount, ref, shallowRef } from "vue";
// import { IButtonMenu } from '@wangeditor/core'
import { Boot } from "@wangeditor/editor";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 测试：第三方插件
// import withCtrlEnter from '@wangeditor/plugin-ctrl-enter'
// Boot.registerPlugin(withCtrlEnter)
// // 测试：多语言
// i18nChangeLanguage('en')
// // 测试：注册 renderElem
// function renderElemFn(elem, children) {
//     const vnode = h('div', {}, children) // type: 'paragraph' 节点，即渲染为 <p> 标签
//     return vnode
// }
// const renderElemConf = {
//     type: 'paragraph', // 节点 type ，重要！！！
//     renderElem: renderElemFn,
// }
// Boot.registerRenderElem(renderElemConf)
// // 测试：注册插件
// function withCtrlEnter(editor) {
//     const { insertBreak } = editor
//     setTimeout(() => {
//         // beforeInput 事件不能识别 ctrl+enter ，所以自己绑定 DOM 事件
//         const { $textArea } = DomEditor.getTextarea(newEditor)
//         $textArea.on('keydown', e => {
//             const isCtrl = e.ctrlKey || e.metaKey
//             if (e.keyCode === 13 && isCtrl) {
//                 // ctrl+enter 触发换行
//                 editor.insertBreak()
//             }
//         })
//     })
//     const newEditor = editor
//     newEditor.insertBreak = () => {
//         const e = window.event
//         const isCtrl = e.ctrlKey || e.metaKey
//         // 只有 ctrl 才能换行
//         if (isCtrl) {
//             insertBreak()
//         }
//     }
//     return newEditor
// }
// Boot.registerPlugin(withCtrlEnter)
// 测试：注册 button menu
class MyButtonMenu {
  constructor() {
    (this.title = "menu1"), (this.tag = "button");
  }
  getValue() {
    return "";
  }
  isActive() {
    return false;
  }
  isDisabled() {
    return false;
  }
  exec(editor) {
    console.log(editor);
    alert("menu1 exec");
  }
}
const menuConf = {
  key: "my-menu-1", // menu key ，唯一。注册之后，需通过 toolbarKeys 配置到工具栏
  factory() {
    return new MyButtonMenu();
  },
};
Boot.registerMenu(menuConf);
console.log(1111111111);
// 编辑器实例，必须用 shallowRef ，重要！
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref("<p>hello&nbsp;world</p>");
// 编辑器配置
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {
    insertImage: {
      checkImage(src) {
        console.log("image src", src);
        if (src.indexOf("http") !== 0) {
          return "图片网址必须以 http/https 开头";
        }
        return true;
      },
    },
  },
};
// 工具栏配置
const toolbarConfig = {
  // toolbarKeys: ['headerSelect', 'bold', 'my-menu-1'],
  // excludeKeys: [],
  insertKeys: {
    index: 0,
    keys: "my-menu-1",
  },
};
// 编辑器回调函数
const handleCreated = (editor) => {
  console.log("created", editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
  // window.editor = editor // 临时测试使用，用完删除
};
const handleChange = (editor) => {
  console.log("change:", editor.children);
};
const handleDestroyed = (editor) => {
  console.log("destroyed", editor);
};
const handleFocus = (editor) => {
  console.log("focus", editor);
};
const handleBlur = (editor) => {
  console.log("blur", editor);
};
const customAlert = (info, type) => {
  alert(`【自定义提示】${type} - ${info}`);
};
const customPaste = (editor, event, callback) => {
  console.log("ClipboardEvent 粘贴事件对象", event);
  // 自定义插入内容
  editor.insertText("xxx");
  // 返回值（注意，vue 事件的返回值，不能用 return）
  callback(false); // 返回 false ，阻止默认粘贴行为
  // callback(true) // 返回 true ，继续默认的粘贴行为
};
// 及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  // 销毁，并移除 editor
  editor.destroy();
});
const getHtml = () => {
  const editor = editorRef.value;
  if (editor == null) return;
  console.log(editor.getHtml());
};
</script>

<template>
  <div>
    <button @click="getHtml">获取 html</button>
  </div>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      style="border-bottom: 1px solid #ccc"
    />
    <!-- 编辑器 -->
    <Editor
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      @onChange="handleChange"
      @onCreated="handleCreated"
      @onDestroyed="handleDestroyed"
      @onFocus="handleFocus"
      @onBlur="handleBlur"
      @customAlert="customAlert"
      @customPaste="customPaste"
      style="height: 500px"
    />
  </div>
</template>

<style src="@wangeditor/editor/dist/css/style.css"></style>
